---
type: tutorial
title: Sende dein erstes Skript an den Browser
description: >-
  Tutorial: Erstelle deinen ersten Astro-Blog —
  Füge clientseitige Interaktivität zu deiner mobilen Navigation mit einem Astro-Skript-Tag hinzu
i18nReady: true
---

import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Fügen wir ein Button hinzu, um dein Navigationsmenü auf mobilen Bildschirmgrößen zu öffnen und zu schließen, was etwas clientseitige Interaktivität erfordert!

<PreCheck>
  - eine Menü-Komponente zu erstellen
  - ein `<script>` zu schreiben, das es deinen Seitenbesuchern erlaubt, das Navigationsmenü zu öffnen und zu schließen
  - dein JavaScript in eine `.js`-Datei zu verschieben
</PreCheck>

## Baue eine Menü-Komponente

Erstelle eine `<Menu />`-Komponente, um dein mobiles Menü zu öffnen und zu schließen.

<Steps>
1. Erstelle eine Datei namens `Menu.astro` in `src/components/`

2. Kopiere den folgenden Code in deine Komponente. Es erstellt eine Schaltfläche, die dazu dient, die Sichtbarkeit der Navigationslinks auf mobilen Geräten ein- und auszublenden. (Die neuen CSS-Styles fügst du später in `global.css` hinzu.)

    ```astro title="src/components/Menu.astro"
    --- 
    ---
    <button aria-expanded="false" aria-controls="main-menu" class="menu">
      Menü
    </button>
    ```

3. Platziere diese neue `<Menu />`-Komponente direkt vor deiner `<Navigation />`-Komponente in `Header.astro`. 

    <details>
    <summary>Zeige mir den Code!</summary>

    ```astro title="src/components/Header.astro" ins={2,7}
    ---
    import Menu from './Menu.astro';
    import Navigation from './Navigation.astro';
    ---
    <header>
      <nav>
        <Menu />
        <Navigation />
      </nav>
    </header>
    ```
    </details>

4. Füge die folgenden Styles für deine Menü-Komponente hinzu, einschließlich einiger responsiver Styles:

    ```css title="src/styles/global.css" ins={2-9, 33-35, 51-53}
    /* Navigation-Styles */
    .menu {
      background-color: #0d0950;
      border: none;
      color: #fff;
      font-size: 1.2rem;
      font-weight: bold;
      padding: 5px 10px;
    }

    .nav-links {
      width: 100%;
      display: none;
      margin: 0;
    }

    .nav-links a {
      display: block;
      text-align: center;
      padding: 10px 0;
      text-decoration: none;
      font-size: 1.2rem;
      font-weight: bold;
      text-transform: uppercase;
      color: #0d0950;
    }

    .nav-links a:hover, 
    .nav-links a:focus {
      background-color: #ff9776;
    }

    :has(.menu[aria-expanded="true"]) .nav-links {
      display: unset;
    }

    @media screen and (min-width: 636px) {
      .nav-links {
        margin-left: 5em;
        display: block;
        position: static;
        width: auto;
        background: none;
      }

      .nav-links a {
        display: inline-block;
        padding: 15px 20px;
      }

      .menu {
        display: none;
      }
    }
    ```
</Steps>

## Schreibe dein erstes Skript-Tag

Dein Header ist noch nicht **interaktiv**, da er nicht auf Benutzereingaben reagieren kann, wie das Klicken auf das Menü, um die Navigationslinks anzuzeigen oder zu verstecken.

Das Hinzufügen eines `<script>`-Tags ermöglicht es clientseitigem JavaScript, auf ein Benutzerereignis zu „hören“ und entsprechend zu reagieren.

<Steps>
1. Füge das folgende `<script>`-Tag, mit der eingebauten TypeScript-Unterstützung von Astro, zu `index.astro`, kurz vor dem schließenden `</body>`-Tag hinzu.

    ```astro title="src/pages/index.astro" ins={2-9}
      <Footer />
      <script>
        const menu = document.querySelector('.menu');
        
        menu?.addEventListener('click', () => {
          const isExpanded = menu.getAttribute('aria-expanded') === 'true';
          menu.setAttribute('aria-expanded', `${!isExpanded}`);
        });
      </script>
    </body>
    ```

2. Überprüfe deine Browser-Vorschau erneut in verschiedenen Größen und stelle sicher, dass du ein funktionierendes Navigationsmenü hast, das sowohl auf die Bildschirmgröße als auch auf Benutzereingaben auf dieser Seite reagiert.
</Steps>

### Eine `.js`-Datei importieren

Anstatt dein JavaScript direkt auf jeder Seite zu schreiben, kannst du den Inhalt deines `<script>`-Tags in seine eigene `.js`-Datei in deinem Projekt verschieben.

<Steps>
1. Erstelle `src/scripts/menu.js` (du musst einen neuen `/scripts/`-Ordner erstellen) und verschiebe dein JavaScript dorthin.

    ```js title="src/scripts/menu.js"
    const menu = document.querySelector('.menu');
    
    menu?.addEventListener('click', () => {
      const isExpanded = menu.getAttribute('aria-expanded') === 'true';
      menu.setAttribute('aria-expanded', `${!isExpanded}`);
    });
    ```

2. Ersetze den Inhalt des `<script>`-Tags auf `index.astro` durch den folgenden Dateiimport:

    ```astro title="src/pages/index.astro" ins={10} del={3-8}
      <Footer />
      <script>
        const menu = document.querySelector('.menu');
        
        menu?.addEventListener('click', () => {
          const isExpanded = menu.getAttribute('aria-expanded') === 'true';
          menu.setAttribute('aria-expanded', `${!isExpanded}`);
        });

        import "../scripts/menu.js";
      </script>
    </body>
    ```

3. Überprüfe deine Browser-Vorschau erneut bei kleineren Größen und bestätige, dass das Menü deine Navigationslinks weiterhin öffnet und schließt.

4. Füge dasselbe `<script>` mit Import auf deinen anderen zwei Seiten, `about.astro` und `blog.astro`, hinzu und überprüfe, ob du eine responsive, interaktive Kopfzeile auf jeder Seite hast.

    ```astro title="src/pages/about.astro & src/pages/blog.astro" ins={2-4}
      <Footer />
      <script>
        import "../scripts/menu.js";
      </script>
    </body>
    ```
</Steps>

:::note[Kerngedanke]
Du hast bereits etwas JavaScript verwendet, um Teile deiner Website zu bauen:

- Dynamische Definition deines Seitentitels und der Überschriften
- Durchlaufen einer Liste von Fähigkeiten auf der „Über mich“-Seite
- Bedingtes Anzeigen von HTML-Elementen

Diese Befehle werden alle beim Erstellen ausgeführt, um statisches HTML für deine Website zu erstellen, und dann wird der Code „weggeworfen“.

**Das JavaScript in einem `<script>`-Tag wird an den Browser gesendet** und steht zur Verfügung, um basierend auf Benutzerinteraktionen wie dem Aktualisieren einer Seite oder dem Umschalten eines Eingabefeldes ausgeführt zu werden.
:::

<Box icon="question-mark">

### Teste dein Wissen

1. Wann führt Astro JavaScript aus, das im Frontmatter einer Komponente geschrieben ist?
    <MultipleChoice>
      <Option>
       Astro führt niemals JavaScript aus
      </Option>
      <Option isCorrect>
        beim Build-Zeitpunkt
      </Option>
      <Option>
         Wenn ein Besucher einen Button klickt
      </Option>
    </MultipleChoice>

2. Optional kann Astro JavaScript an den Browser senden, um:
    <MultipleChoice>
      <Option>
        Benutzern zu ermöglichen, Seitenlinks zu klicken
      </Option>
      <Option>
        schnellere Ladezeiten zu erreichen
      </Option>
      <Option isCorrect>
        clientseitige Interaktivität zu ermöglichen
      </Option>
    </MultipleChoice>

3. Das clientseitige JavaScript wird an den Browser des Benutzers gesendet, wenn es geschrieben oder importiert wird:
    <MultipleChoice>
      <Option isCorrect>
        in `<script>`-Tags
      </Option>
      <Option>
        zwischen den Codezäunen einer `.astro`-Datei
      </Option>
      <Option>
        in `global.css`
      </Option>
    </MultipleChoice>

</Box>

<Box icon="check-list">

## Checkliste

<Checklist>
- [ ] Ich kann clientseitige Interaktivität mit JavaScript in einem `<script>`-Tag hinzufügen.
- [ ] Ich kann eine `.js`-Datei in ein `<script>`-Tag importieren.
</Checklist>

</Box>

### Ressourcen

[Clientseitige Skripte in Astro](/de/guides/client-side-scripts/)
